<div class="container-fluid" id="tableLogFiles">
	<h4 class="c-grey-900 mT-10 mB-30" th:text="#{log.files.admin.title}"></h4>
	<div class="row">
		<div class="col-md-12">
			<div class="bgc-white bd bdrs-3 p-20 mB-20" >
				<div class="mon-toolbar">
					<h4 class="c-grey-900 mB-20 mon-distribution-left">
						<span th:text="#{table.log.files.title}" /><span th:text="${': ' + connectioninfo.serviceName}" />
					</h4>
					<div class="mon-panel-close mon-distribution-right">
						<button type="button" id="disconnect-button" class="btn btn-secondary">Desconectar</button>
					</div>
					<div class="clearfix"></div>
				</div>
				<table id="logFilesTable" class="table table-striped table-bordered" 
					cellspacing="0" width="100%">
					<thead>
						<tr>
							<!-- Columna oculta para el identificador de la plataforma -->
							<th th:text="#{table.log.file.name}"></th>
							<th th:text="#{table.log.file.date}"></th>
							<th th:text="#{table.log.file.size}"></th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
	</div>
</div>

<script th:inline="javascript">
$(document).ready(function() {

	$('#disconnect-button').on('click', disconnectToSpl);
	
	var logFiles = /*[[@{/logfilesdatatable}]]*/;
	
	var tbl = $('#logFilesTable').DataTable({
		dom: 'Bfrtip',
	    select: 'single',
	    responsive: true,
	    
	    altEditor: true,
	    buttons: [
	    	{text: 'Abrir', name: 'openFile', extend: 'selected', action: openLogFile}
	    ],

	    "iTotalRecords": "totalElements",
        "iTotalDisplayRecords": "numberOfElements",
        
		"processing": true,
	    "serverSide": false,
	    

	    "language": {
	        "url": "js/datatables/i18n/spanish.json",
	        select: {
	            rows: {
	                _: "%d filas seleccionadas",
	                1: "1 fila seleccionada"
	            }
	        }
	    },

		"columns": [
	        { "data": "name" },
	        { "data": "date",
	        	render: function(data, type, row) {
                	return formatDate(data);
            	}
	        },
	        { "data": "size",
	        	render: function(data, type, row) {
                	return formatBytes(data);
            	}
	        }
	    ],

		"ajax": {
	        "url": logFiles,
	        "dataSrc" : "data",
	        "type": "GET"
	    }

	});	

});

function formatDate ( msec ) {
	var date = new Date(msec);
	
	var day = pad2TwoDigits(date.getDate());
	var month = pad2TwoDigits(date.getMonth() + 1);
	var year = date.getFullYear();
	
	var hour = pad2TwoDigits(date.getHours());
	var minute = pad2TwoDigits(date.getMinutes());
	var second = pad2TwoDigits(date.getSeconds());
	
	return day + '/' + month + '/' + year + ' ' + hour + ":" + minute + ':' + second;
}

function pad2TwoDigits(num) {
    return (num < 10 ? '0' : '') + num;
}

function formatBytes ( bytes ) {
	var text;
	if (bytes < 1024) {
		text = bytes + " bytes"; 
	}
	else if (bytes < (1024 * 1024)) {
		text = (bytes / 1024).toFixed(2) + ' Kb'; 
	}
	else if (bytes < (1024 * 1024 * 1024)) {
		text = (bytes / (1024 * 1024)).toFixed(2) + ' Mb';
	}
	else {
		text = (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' Gb';
	}
	return text.replace('.', ','); // Utilizamos el separador de decimales espanol
}

function openLogFile ( e, dt, node, config ) {

	e.preventDefault();
	
	loading();
	
	// Se obtienen las filas seleccionadas (que deberia ser solo una)
	var d = dt.rows({
        selected: !0
    })
    
	// Si no se puede extraer la informacion de la fila, no se hace nada 
    if (d.data().length <= 0) {
    	hide();
    	return;
    }

	// Se obtiene el identificador y el indice correspondiente a la fila seleccionada
	var id = d.data()[0].name;
	
	var openLogFileService = /*[[@{/openlogfile}]]*/;
    $.ajax(openLogFileService, {
		data: $.param({'id':id}),
        type: 'POST',
        success: function(data) {
    		// Se oculta la capa 'cargando...'
    		hide();

        	// Cargamos en el componente padre de la tabla el HTML recuperado
			$("#tableLogFiles").parent().html(data);
        },
        error:function(data){
        	// Se oculta la capa 'cargando...'
        	hide();
        
		}
	});
}

function disconnectToSpl ( e, dt, node, config ) {

	e.preventDefault();
	
	loading();
	
	var disconnectService = /*[[@{/disconnectspl}]]*/;
    $.ajax(disconnectService, {
        type: 'POST',
        success: function(data) {
    		// Se oculta la capa 'cargando...'
    		hide();

        	// Cargamos el listado de SPL en el componente padre de la tabla
			$("#tableLogFiles").parent().html(data);
        },
        error:function(data){
        	// Se oculta la capa 'cargando...'
        	hide();
        
		}
	});
}

</script>